<template>
<div class="text">
  <div class="d1" ref="d1">
    敬请期待
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1>真来不及做</h1>
  </div>
  <a v-if="show" href="javascript:;" @click="text">↓查看详情</a>
  <a v-else href="javascript:;" @click="text2">↑收起</a>
</div>
</template>

<script>
export default {
  name: "CollectionView",
  data() {
    return {
      show: true
    }
  },
  methods:{
    text2(){
      this.$refs.d1.className='d1'
      this.show=!this.show
    },
    text(){
      this.$refs.d1.className=''
      this.show=!this.show
    }
  }
}
</script>

<style scoped>

.text .d1{
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
}
</style>